$base-color: #33FFFF;
//$base-color: #fff;

.flow-container {
  padding: 2rem;
}

.flow-point {
  display: inline-block;
  width: 16.66%;
  vertical-align: middle;
  position: relative;
  span {

  }

}
.flow-circle{
  float: left;
  padding: .8rem;
  border-radius: 50%;
  background: $base-color;
  &.flow-circle-little {
    padding: .5rem;
  }
}


%base-txet {
  position: absolute;
  color: $base-color;
  vertical-align: top;
  left: 1.2rem;
  top:0
}
.flow-text-top {
  @extend %base-txet;
  margin-top: -1rem;
}
.flow-text-bottom {
  @extend %base-txet;
  margin-top: 1rem;
}

.flow-line {
  border: .15rem solid $base-color;
  margin-top: -1rem;
  width: 83.33%;
}

.flow-box {
  position: relative;
  margin-left: calc(33.3% + .5rem);
  margin-right: calc(16.66% - .5rem);;
  height: 8rem;
  border-left: .2rem solid $base-color;
  border-bottom: .2rem solid $base-color;
}

.flow-tip-box {
  position: absolute;
  bottom: 0;
  left: 0;
  margin-left: -.8rem;
  margin-bottom: -.5rem;
  width: 33.3%;
}

.flow-pos-text{
  color: $base-color;
  margin-left: -4rem;
  position: absolute;
  bottom: 0;
  font-size: 1.2rem;
}